<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="订单编号" prop="orderCode">
            {{ form.orderCode }}
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="订单日期" prop="orderDate">
            {{ form.orderDate }}
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopName">
            {{ form.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="lineName">
            {{ form.lineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品编号" prop="prodCode">
            {{ form.prodCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品名称" prop="prodName">
            {{ form.prodName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划产量" prop="planNumber">
            {{ form.planNumber }}
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="已排产产量" prop="arrangeNumber">
            {{ form.arrangeNumber }}
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="实际产量" prop="actualNumber">
            {{ form.actualNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位" prop="unit">
            {{ form.unit }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="规格" prop="packages">
            {{ form.packages }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="型号" prop="model">
            {{ form.model }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划开始时间" prop="planStartTime">
            {{ form.planStartTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划结束时间" prop="planEndTime">
            {{ form.planEndTime }}
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="备注" prop="remark">
            {{ form.remark }}
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="来源" prop="source">
            {{ form.sourceName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="statusName">
            {{ form.statusName }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="form.status == 'IN_PRODUCTION' || form.status == 'COMPLETED'">
          <el-form-item label="确认生产时间" prop="actualStartTime">
            {{ form.actualStartTime || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="form.status == 'COMPLETED'">
          <el-form-item label="完工时间" prop="actualEndTime">
            {{ form.actualEndTime || "-" }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClickTab">
      <el-tab-pane label="报工记录" name="first">
        <el-form ref="reportForm" :inline="true" :model="reportParams" label-width="100">
          <el-form-item label="投料批号" prop="feedingBatchNo">
            <el-input
              v-model="reportParams.feedingBatchNo"
              placeholder="请输入投料批号"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="产出批号" prop="outputBatchNo">
            <el-input
              v-model="reportParams.outputBatchNo"
              placeholder="请输入产出批号"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="投料时间段" prop="date">
            <el-date-picker
              v-model="reportParams.date"
              style="width: 240px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="收卷时间段" prop="date">
            <el-date-picker
              v-model="reportParams.date1"
              style="width: 240px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="reportParams.status"
              placeholder="请选择状态"
              clearable
              filterable
              style="width: 240px"
            >
              <el-option
                v-for="(item, index) in report_work_status"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loadingReport"
          :data="rerortList"
          border
          style="width: 100%"
          max-height="500px"
        >
          <el-table-column width="140" label="投料批号" prop="feedingBatchNo">
            <template #default="scope">
              <el-link
                v-hasPermi="['produce:ProdReportWork:query']"
                type="primary"
                @click="goDetailFeeding(scope.row)"
              >
                {{ scope.row.feedingBatchNo || "-" }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column width="100" label="投入数量(米)" prop="inputQty" />
          <el-table-column width="180" label="投料时间" prop="feedingTime" />
          <el-table-column width="180" label="收卷时间" prop="rollingTime" />
          <el-table-column width="140" label="产出批号" prop="outputBatchNo">
            <template #default="scope">
              <el-link type="primary" @click="handleUpdate(scope.row, 'view')">
                {{ scope.row.outputBatchNo || "-" }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column width="100" label="产出数量(米)" prop="outputQyt" />
          <el-table-column width="100" label="有效数量(米)" prop="effectiveQyt" />
          <el-table-column width="100" label="损耗(米)" prop="loss" />
          <el-table-column width="100" label="投产比" prop="inputProdRate" />
          <el-table-column width="100" label="缺陷描述" prop="defectDesc" />
          <el-table-column label="质检结果" prop="testingResult">
            <template #default="scope">
              <dict-tag
                v-if="scope.row.testingResult"
                :options="quality_testing_result"
                :value="scope.row.testingResult"
              />
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column width="100" label="外观判定" prop="appearanceJudgment" />
          <el-table-column width="100" label="性能判定" prop="performanceJudgment" />
          <el-table-column width="100" label="不良描述" prop="qmsDefectDesc" />
          <el-table-column width="100" label="线边仓" prop="storehouseName" />
          <el-table-column width="100" label="库位" prop="binName" />
          <el-table-column width="100" label="操作人" prop="operator" />
          <el-table-column width="100" label="记录时间" prop="recordTime" />
          <el-table-column width="100" label="状态" prop="status">
            <template #default="scope">
              <dict-tag :options="report_work_status" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="rerortTotal > 0"
          :total="rerortTotal"
          v-model:page="reportParams.pageNum"
          v-model:limit="reportParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="交接班记录" name="second">
        <el-form ref="shiftForm" :inline="true" :model="shiftParams" label-width="100">
          <el-form-item label="时间段" prop="date">
            <el-date-picker
              v-model="shiftParams.date"
              style="width: 240px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="shiftParams.status"
              placeholder="请选择状态"
              clearable
              filterable
              style="width: 240px"
            >
              <el-option
                v-for="(item, index) in change_shifts_status"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getListShift">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loadingShift"
          :data="shiftList"
          border
          style="width: 100%"
          max-height="500px"
        >
          <el-table-column label="生产日期" prop="prodDate" />
          <el-table-column label="班次" prop="scheduleName" />
          <el-table-column
            label="班组"
            prop="workGroupName"
            :show-overflow-tooltip="true"
            width="140"
          >
            <template #default="scope">
              <el-link
                type="primary"
                v-if="scope.row.status == 1"
                @click="handleDetailing(scope.row)"
              >
                {{ scope.row.workGroupName }}
              </el-link>
              <el-link
                type="primary"
                v-else-if="scope.row.status == 2"
                @click="handleDetailhas(scope.row)"
              >
                {{ scope.row.workGroupName }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="班长" prop="monitorName" />
          <!-- <el-table-column label="工厂" prop="factoryName" /> -->
          <!-- <el-table-column label="工段" prop="workshopName" /> -->
          <!-- <el-table-column label="产线" prop="productLineName" /> -->
          <!-- <el-table-column label="工艺段" prop="sectionName" /> -->
          <el-table-column label="接班时间" prop="createTime">
            <template #default="scope">
              <span>{{ scope.row.createTime || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交班时间" prop="updateTime">
            <template #default="scope">
              <span v-if="scope.row.status == 2">{{ scope.row.updateTime || "-" }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="订单编号" prop="orderCode" /> -->
          <!-- <el-table-column label="产品名称" prop="prodName" /> -->
          <el-table-column label="当班产量" prop="onDutyOutput" />
          <el-table-column label="单位" prop="unit" />
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <dict-tag :options="change_shifts_status" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="shiftTotal > 0"
          :total="shiftTotal"
          v-model:page="shiftParams.pageNum"
          v-model:limit="shiftParams.pageSize"
          @pagination="getListShift"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Data">
import { getOrder } from "@/api/base/workOrder/order";
import { getFactoryTree, depeIdSelectList } from "@/api/system/dept";
import { reactive, useAttrs, ref, toRefs, getCurrentInstance, onMounted } from "vue";
import { listProdReportWork } from "@/api/productionMgt/productionReport";
import { listChangeShifts } from "@/api/productionMgt/changeShifts";
import DataInfo from "./../../productionMgt/productionReport/data.vue";
import DataInfoFeeding from "./../../productionMgt/productionFeeding/data.vue";
import DetailData from "./../../productionMgt/changeShifts/data.vue";
const { proxy } = getCurrentInstance();
const { order_source } = proxy.useDict("order_source");
const { order_status } = proxy.useDict("order_status");
const { report_work_status } = proxy.useDict("report_work_status");
const { change_shifts_status } = proxy.useDict("change_shifts_status");
const { quality_testing_result } = proxy.useDict("quality_testing_result");
const attrs = useAttrs();
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
  },
  reportParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    feedingBatchNo: "",
  },
  shiftParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
  },
});
const formRef = ref(null);
const reportForm = ref(null);
const shiftForm = ref(null);

const { form, queryParams, reportParams, shiftParams } = toRefs(data);
var factoryOptions = ref([]);
var workshopOptions = ref([]);
var lineOptions = ref([]);
var processOptions = ref([]);
const activeName = ref("first");

const rerortList = ref([]);
const loadingReport = ref(true);
const rerortTotal = ref(0);

const shiftList = ref([]);
const loadingShift = ref(true);
const shiftTotal = ref(0);

// 从字典中获取leble
function getName(list = [], value) {
  let name = "";
  if (list.length) {
    list.forEach((item) => {
      if (item.value == value) {
        name = item.label;
      }
    });
  }
  return name;
}
function getDetail(id) {
  reset();
  console.log(order_source);
  getOrder(id).then((res) => {
    form.value = res.data;
    if (form.value.source) {
      form.value.sourceName = getName(order_source.value, form.value.source);
    }
    if (form.value.status) {
      form.value.statusName = getName(order_status.value, form.value.status);
    }
    queryParams.value.factory = form.value.factory;
    handleSearchListChange("factory");
    queryParams.value.workSection = form.value.workSection;
    handleSearchListChange("workSection");
    getList();
    getListShift();
  });
}
/** 查询交接班列表 */
function getListShift() {
  loadingShift.value = true;
  let newForm = JSON.parse(JSON.stringify(shiftParams.value));
  if (shiftParams.value?.date?.length) {
    newForm.startTime4CarryOn = shiftParams.value.date[0];
    newForm.endTime4CarryOn = shiftParams.value.date[1];
    delete newForm.date;
  }
  newForm.orderCode = form.value.orderCode;
  newForm.orderByType = "desc";
  listChangeShifts(proxy.addDateRange(newForm)).then((response) => {
    shiftList.value = response.rows;
    shiftTotal.value = response.total;
    loadingShift.value = false;
  });
}
function getList() {
  console.log(reportParams.value);
  loadingReport.value = true;
  let newForm = JSON.parse(JSON.stringify(reportParams.value));
  if (reportParams.value?.date?.length) {
    newForm.startFeedingTime = reportParams.value.date[0] + " 00:00:00";
    newForm.endFeedingTime = reportParams.value.date[1] + " 23:59:59";
    delete newForm.date;
  }
  if (reportParams.value?.date1?.length) {
    newForm.startRollingTime = reportParams.value.date1[0] + " 00:00:00";
    newForm.endRollingTime = reportParams.value.date1[1] + " 23:59:59";
    delete newForm.date1;
  }
  newForm.orderCode = form.value.orderCode;
  newForm.orderByType = "desc";

  listProdReportWork(proxy.addDateRange(newForm)).then((response) => {
    rerortList.value = response.rows;
    rerortTotal.value = response.total;
    loadingReport.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

function handleClickTab() {
  if (activeName.value == "second") {
    getList();
  }
  if (activeName.value == "first") {
    getListShift();
  }
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    type: undefined,
    equipNo: undefined,
    model: undefined,
    factory: undefined,
    segmentCode: undefined,
    workSection: undefined,
    status: undefined,
    remark: undefined,
  };
  formRef.value.resetFields();
}

function getFactorys(query) {
  getFactoryTree(query).then((res) => {
    factoryOptions.value = res.data;
  });
}

function handleSearchListChange(type) {
  if (type == "factory") {
    depeIdSelectList({
      deptType: "station",
      deptCode: queryParams.value.factory,
    }).then((res) => {
      workshopOptions.value = res.data;
      // lineOptions.value = [];
      processOptions.value = [];
      // queryParams.value.workSection = "";
      // queryParams.value.productLine = "";
      queryParams.value.sectionCode = "";
    });
  }
  if (type == "workSection") {
    depeIdSelectList({
      deptType: "line",
      deptCode: queryParams.value.workSection,
    }).then((res) => {
      lineOptions.value = res.data;
      processOptions.value = [];
      queryParams.value.productLine = "";
      queryParams.value.sectionCode = "";
    });
  }
  if (type == "productLine") {
    depeIdSelectList({
      deptType: "craft",
      deptCode: queryParams.value.productLine,
    }).then((res) => {
      processOptions.value = res.data;
      queryParams.value.sectionCode = "";
    });
  }
}
/** 修改按钮操作 */
function handleUpdate(row) {
  if (!proxy.checkPermi(["produce:ProdReportWork:query"])) {
    return;
  }
  proxy.subPageNext(DataInfo, { title: "报工详情", data: { ...row, parentType: "view" } }, () => {
    getList();
  });
}
/** 投料详情操作 */
function goDetailFeeding(row) {
  row.id = row.feedingId;
  proxy.subPageNext(
    DataInfoFeeding,
    { title: "投料详情", data: { ...row, parentType: "view" } },
    () => {
      getList();
    }
  );
}

// 查看生产中的交接班详情
function handleDetailing(row) {
  proxy.subPageNext(DetailData, {
    title: "接班详情",
    data: { ...row, parentType: "productingView" },
  });
}
// 查看已交班的交接班详情
function handleDetailhas(row) {
  proxy.subPageNext(DetailData, {
    title: "交接班详情",
    data: { ...row, parentType: "productedView" },
  });
}

getFactorys();
onMounted(async () => {
  const { data } = attrs;
  getDetail(data.id);
});
</script>
